<template>
	<div class="flex-start-center width-100-percent" style="flex-direction: column;align-items: flex-start;">
		<div
			v-for="(shiftItem, shiftIndex) in shiftList || []"
			:key="shiftIndex"
			class="flex-start-center width-100-percent"
			style="border-bottom: solid 1px #eee;"
		>
			<div style="width: 80px;border-right: solid 1px #eee;display: flex;align-items: center;">{{ shiftItem.shiftName }}</div>
			<div class="width-100-percent flex-start-center-wrap">
				<div
					v-for="(groupItem, groupIndex) in shiftItem.groupList"
					:key="groupIndex"
					style="width: 100px;padding: 2px;flex-shrink: 0;"
				>
					<el-tag
						size="mini"
						:closable="pageType !== 'detail'"
						class="width-100-percent flex-between-center"
						@close="onDeleteGroupItem(shiftIndex, groupIndex)"
					>{{ groupItem.groupName }}</el-tag>
				</div>
				<el-popover width="500" title="选择班组" trigger="click" class="">
					<div size="small" class="flex-start-center-wrap">
						<div
							v-for="(optionItem, optionIndex) in groupList || []"
							:key="optionIndex"
							style="width: calc(100% / 4);padding: 4px 2px;box-sizing: border-box;"
						>
							<el-button
								:type="shiftItem.groupList.find(x => x.groupId === optionItem.groupId) ? 'primary' : 'default'"
								border
								style="width: 100%;margin: 0 2px;"
								class="item-gap"
								@click="onSelectToggleBtn(shiftIndex, shiftItem.groupList, optionItem)"
							>{{ optionItem.groupName }}</el-button>
						</div>
					</div>
					<el-tag
						v-if="pageType !== 'detail'"
						slot="reference"
						size="mini"
						class="el-icon-plus"
					></el-tag>
				</el-popover>
			</div>
		</div>
	</div>
</template>
<script>
    export default {
        props: {
            rowIndex: {
                type: Number,
                default: null
            },
            shiftList: {
                type: Array,
                default() {
                    return [];
                }
            },
            groupList: {
                type: Array,
                default() {
                    return [];
                }
            },
            pageType: {
                type: String,
                default: ''
            }
        },
        methods: {
            onDeleteGroupItem(shiftIndex, groupIndex) {
                this.$emit('on-delete-group-item', this.rowIndex, shiftIndex, groupIndex);
            },
            onSelectToggleBtn(shiftIndex, groupList, item) {
                this.$emit('on-set-toggle-item', this.rowIndex, shiftIndex, groupList, item);
            }
        }
    };
</script>
